---
title: List with handler
description: A guide to use Fluid DnD to adding a drag handler to a list.
---

import SingleListWithHandler from "@/components/vue/SingleListWithHandler.vue";
import { Code } from "@astrojs/starlight/components";

### List of number example

With **Fluid DnD** you dont have to drag the elements across its entire surface, just pass a **handler selector** to `handlerSelector` property that will be used to find the handler element as following:

export const listOfNumbers = `<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";
import Handler from "./icons/handler.vue";

const list = ref([1, 2, 3, 4, 5]);
const handlerSelector = ".handler";
const [ parent ] = useDragAndDrop(list, { handlerSelector });

</script>`;

<Code code={listOfNumbers} lang="vue" />

### Creating the view

After, we'll create the `template` and add the class `handler` to the `Handler` component:

export const listOfNumbersDraggable = `

<template>
    <ul ref="parent" class="number-list">
      <li class="number" v-for="(element, index) in list" :index="index">
        <Handler class="handler" />
        {{ element }}
    </li>
    </ul>
</template>`;

export const highlightsDraggable = ["handler"];

<Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />

### Preview

<div class="pl-8">
  <SingleListWithHandler client:load />
</div>
